<template>
  <button
    class="r-button"
    :disabled="disabled"
    :class="styleClass"
    @click="handleClick"
  >
    <span v-if="icon">
      <p-icon :name="icon"></p-icon>
    </span>

    <slot></slot>
  </button>
</template>

<script>
import PIcon from './p-icon.vue'
export default {
  name: "p-button",
  components: { PIcon },
  props: {
    type: {
      type: String,
      default: "",
      validator: value => {
        return ["", "primary", "success", "warning", "danger"].includes(value);
      }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    round: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: ""
    }
  },
  computed: {
    styleClass() {
      return {
        [`r-button--${this.type}`]: this.type,
        ["is-round"]: this.round,
        "is-disabled": this.disabled
      };
    }
  },
  methods: {
    handleClick() {
      this.$emit("click");
    }
  }
};
</script>

<style scoped>
@import "../assets/styles/button.scss";
</style>